<template>
  <div class="right-container">
    <el-scrollbar>
      <div class="form-design-setting-container">
        <el-form size="" label-width="100px" label-position="left">
          <el-tabs v-model="tabs0">
            <el-tab-pane label="全局设置" name="0">
              <el-form-item label="一页一题">
                <el-switch v-model="formDesign.onePageOneQs" inline-prompt active-text="开启" inactive-text="关闭" :active-value="true" :inactive-value="false" :before-change="beforeChangeOnePageOneQs" @change="handleOnePageOneQs"/>
              </el-form-item>
              <el-form-item label="考试须知" v-if="curId == 4">
                <el-switch v-model="formDesign.formNotice.isOpen" inline-prompt active-text="开启" inactive-text="关闭" :active-value="true" :inactive-value="false" @change="handleExamNotice"/>
              </el-form-item>
              <el-form-item label="及格分数" v-if="curId == 4">
                <el-input-number v-model="localPassingScore" :min="1" :max="totalScore"/>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </div>
      <component v-if="formComponent.type"
        :is='getCurModelComponent'
        :formComponent="formComponent"
      ></component>
      <el-empty v-else description="请选择组件"></el-empty>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, watch, computed, markRaw } from "vue";
import Radio from "@/views/form/manage/design/settingComponent/Radio";
import Input from "@/views/form/manage/design/settingComponent/Input";
import Textarea from "@/views/form/manage/design/settingComponent/Textarea";
import Checkbox from "@/views/form/manage/design/settingComponent/Checkbox";
import SelectSingle from "@/views/form/manage/design/settingComponent/SelectSingle";
import SelectMultiple from "@/views/form/manage/design/settingComponent/SelectMultiple";
import Pagenation from "@/views/form/manage/design/settingComponent/Pagenation";
import FileUpload from "@/views/form/manage/design/settingComponent/FileUpload";
import ImgUpload from "@/views/form/manage/design/settingComponent/ImgUpload";
import Vote from "@/views/form/manage/design/settingComponent/Vote";
import BaseInfo from "@/views/form/manage/design/settingComponent/BaseInfo";
import Identity from "@/views/form/manage/design/settingComponent/Identity";
import Phone from "@/views/form/manage/design/settingComponent/Phone";
import Native from "@/views/form/manage/design/settingComponent/Native";
import SecondTitle from "@/views/form/manage/design/settingComponent/SecondTitle";
import DateCmp from "@/views/form/manage/design/settingComponent/Date";
import { useStore } from 'vuex'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  totalScore: {
    type: Number,
    default: 1
  }
})
const store = useStore()
const formDesign = computed(()=>{ return store.getters.formDesignInfo})
const formComponents = computed(() => {return formDesign.value.formItemList || [];});
const currentFormItemId = computed(() => {return formDesign.value.formCmpId});
const curId = computed(() => {return store.state.formDesignInfo.curId});
const formComponent = ref({}); // 选中的formCmp
const tabs0 = ref('0')

// // 考试试卷总分计算
const totalScore = computed(() => props.totalScore || 1)

// 本地副本用于绑定 el-input-number
const localPassingScore = computed({
  get: () => {
    return store.state.formDesignInfo.formDesignInfo.publishSetting.passingScore
  },
  set: (val) => {
    store.state.formDesignInfo.formDesignInfo.publishSetting.passingScore = val
  }
})
// 监听totalScore的变化
watch(totalScore, (newTotalScore) => {
  const currentPassingScore = localPassingScore.value
  // 当当前及格分数大于新的总分时，更新及格分数为新的总分
  if (currentPassingScore > newTotalScore) {
    localPassingScore.value = newTotalScore
  }
})

watch( // 监听选中组件并赋值
  () => formDesign.value,
  () => {
    curChooseCmpInit()
  },{
    deep: true
  }
);
const curChooseCmpInit = () => {
  formComponents.value.forEach((item) => {
    if (item.formItemId === currentFormItemId.value) formComponent.value = item
  });
}
curChooseCmpInit()
const componentsList = ref([
  { component: markRaw(Input), type: 'input' },
  { component: markRaw(Textarea), type: 'textarea' },
  { component: markRaw(Radio), type: 'radio' },
  { component: markRaw(Checkbox), type: 'checkbox' },
  { component: markRaw(SelectSingle), type: 'selectSingle' },
  { component: markRaw(SelectMultiple), type: 'selectMultiple' },
  { component: markRaw(Pagenation), type: 'pagenation' },
  { component: markRaw(FileUpload), type: 'fileUpload' },
  { component: markRaw(ImgUpload), type: 'imgUpload' },
  { component: markRaw(Vote), type: 'vote' },
  { component: markRaw(BaseInfo), type: 'baseInfo' },
  { component: markRaw(Identity), type: 'identity' },
  { component: markRaw(Phone), type: 'phone' },
  { component: markRaw(Native), type: 'native' },
  { component: markRaw(SecondTitle), type: 'secondTitle' },
  { component: markRaw(DateCmp), type: 'date' },
])
const getCurModelComponent = computed(()=>{
  return componentsList.value.find(item => item.type == formComponent.value.type).component
})
// *********************************一页一题配置开始*************************************
const pagenation = {
  type: "pagenation",
  label: "",
  compName: '分页', //组件名
  width:'100%', //宽度
  qsList: [], //当前页的题目
  default: null,
}
// 开启/关闭一页一题
const beforeChangeOnePageOneQs = () => {
  const hasSecondTitle = formComponents.value.some(item => item.type == 'secondTitle')
  if (hasSecondTitle) {
    return ElMessageBox.confirm('检测到问卷含有段落说明，开启一页一题后，段落说明将无法显示', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
  }
  return Promise.resolve(true)
}
const handleOnePageOneQs = (val) => {
  let newList = []
  if(val){ 
    let cpmArr = formComponents.value.filter(item=>item.type != 'pagenation' && item.type != 'secondTitle')
    cpmArr.forEach(cmp =>{
      newList.push(handelAddPagenaiton(pagenation))
      newList.push(cmp)
    })
    formDesign.value.formItemList = newList
  }else{
    formDesign.value.formItemList = formDesign.value.formItemList.filter(item => item.type != 'pagenation')
  }
}
// 生成分页器组件
const handelAddPagenaiton = (cmp) => {
  console.log('cmp', cmp);
  const newCmp = JSON.parse(JSON.stringify(cmp));
  // 生成唯一id
  if (!newCmp.formItemId) newCmp.formItemId = newCmp.type + "_" + Date.now() + "_" + Math.ceil(Math.random() * 99999);
  console.log('newCmp', newCmp);
  return newCmp
}
// *********************************一页一题配置结束*************************************
const handleExamNotice = (val) => {
  formDesign.value.formNotice.isOpen = val
}
</script>

<style lang="scss" scoped>
.right-container{
  height: calc(100vh - 64px);
}
.form-setting{
.el-select{
  width: 60%;
  }
}
.el-empty{
  margin-top: 25vh;
}
</style>

